<template>
  <view class="container">
    <view v-if="appointments.length > 0">
      <view
        v-for="(item, index) in appointments"
        :key="item._id"
        class="appointment-card"
      >
        <view>预约日期：{{ item.day }}</view>
        <view>预约时段：{{ item.appointedSlot }}</view>
        <view>顾问姓名：{{ item.consultantName }}</view>
        <image
          v-if="item.consultantAvatar"
          :src="item.consultantAvatar"
          class="avatar"
        ></image>
        <view v-if="item.file_path">
          <text>咨询记录：</text>
          <text @click="goToChatHis(item)"  class="file-link">
            查看咨询记录
          </text>
        </view>
      </view>
      <view class="footer-text" v-if="noMore">—— 没有更多了 ——</view>
    </view>
    <view v-else>暂无预约记录</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      appointments: [],
      page: 1,
      pageSize: 5,
      loading: false,
      noMore: false
    }
  },
  onLoad() {
    this.loadAppointments()
  },
  onReachBottom() {
    if (!this.loading && !this.noMore) {
      this.page++
      this.loadAppointments()
    }
  },
  methods: {
	goToChatHis(item){
		console.log(item);
		  uni.setStorageSync('chatData', {
		    fileUrl: item.file_path,
		    userAvatar: item.userAvatar,
		    consultantAvatar: item.consultantAvatar,
		    consultantName: item.consultantName
		  });
		
		  uni.navigateTo({
		    url: `/pages/userInfo/chatHistory`
		  });
	},
	
    async loadAppointments() {
      this.loading = true
      const res = await uniCloud.callFunction({
        name: 'getUserAppointRecords',
        data: {
          uniIdToken: uni.getStorageSync('uni_id_token'),
          page: this.page,
          pageSize: this.pageSize
        }
      })
	  console.log(res)
      this.loading = false

      if (res.result.success) {
        const data = res.result.result.data
        if (data.length < this.pageSize) {
          this.noMore = true
        }
        this.appointments = this.appointments.concat(data)
      } else {
        uni.showToast({
          title: '获取预约记录失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
}
.appointment-card {
  background-color: #f9f9f9;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-top: 10rpx;
}
.file-link {
  color: #007aff;
  text-decoration: underline;
  margin-top: 10rpx;
  display: inline-block;
}
.footer-text {
  text-align: center;
  color: #888;
  padding: 20rpx;
}
</style>
